import React from 'react';
import { Link } from 'umi';
import { Badge, Space, Popconfirm, Button, message } from 'antd';
import { resetPassword, updateStatus, del } from '@/services/Admin';

/* 
* 重置操作按钮组件
*/
class ResetPasswordButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      text: '重置密码'
    }
  }
  onReset = async () => {
    try {
      const { id } = this.props;
      this.setState({
        isLoading: true,
        text: '重置.'
      });
      await resetPassword(id);
      message.success('重置成功！');
    } catch (e) {
      console.log(e)
    } finally {
      this.setState({
        isLoading: false,
        text: '重置密码'
      });
    }
  }
  render() {
    const { onReset } = this;
    const { isLoading, text } = this.state;
    return (
      <Popconfirm
        title={`您确定要重置密码吗？`}
        onConfirm={onReset}
        okText="确定"
        cancelText="取消">
        <Button type="link" size='small' loading={isLoading}>{text}</Button>
      </Popconfirm>
    )
  }
}


/* 
* 状态按钮组件
*/
class StatusButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      status: props.status,
      text: props.status === 1 ? '禁用' : '启用'
    }
  }
  onChange = async () => {
    try {
      const { id, dataSource, setDataSource } = this.props;
      const status = this.state.status;
      this.setState({
        isLoading: true,
        text: status === 1 ? '禁用.' : '启用.'
      });
      const changeStatus = status === 1 ? 2 : 1;
      await updateStatus(id, changeStatus);
      setDataSource(dataSource.map(function (item) {
        item.id === id ? item.status = changeStatus : null;
        return item
      }))
      this.setState({ status: changeStatus});
      message.success(status === 1 ? '已禁用' : '已启用');
    } catch (e) {
      console.log(e)
    } finally {
      const status = this.state.status;
      this.setState({
        isLoading: false,
        text: status === 1 ? '禁用' : '启用'
      });
    }
  }
  render() {
    const { onChange } = this;
    const { isLoading, text, status } = this.state;
    return (
      <Popconfirm
        title={() => { return '您确定要' + (status === 1 ? '禁用' : '启用') + '此管理员吗?' }}
        onConfirm={onChange}
        okText="确定"
        cancelText="取消">
        <Button type="link" size='small' loading={isLoading}>{text}</Button>
      </Popconfirm>
    )
  }
}

/* 
* 删除操作按钮组件
*/
class DelButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      text: '删除'
    }
  }
  onDel = async () => {
    try {
      const { id, dataSource, setDataSource } = this.props;
      this.setState({
        isLoading: true,
        text: '删除.'
      });
      await del(id);
      setDataSource(dataSource.filter(function (item) {
        return item.id !== id
      }))
      message.success('删除成功！');
    } catch (e) {
      console.log(e)
    }
  }
  render() {
    const { onDel } = this;
    const { isLoading, text } = this.state;
    const { name } = this.props;
    return (
      <Popconfirm
        title={`您确定要删除角色 ${name} 吗？`}
        onConfirm={onDel}
        okText="确定"
        cancelText="取消">
        <Button type="link" size='small' loading={isLoading}>{text}</Button>
      </Popconfirm>

    )
  }
}

const columns = (dataSource, setDataSource) => {
  return [
    {
      title: '管理员名称',
      key: 'name',
      dataIndex: 'name',
      ellipsis: true
    },
    {
      title: '角色',
      key: 'role',
      dataIndex: 'role',
      ellipsis: true,
      render: (_, row) => { return row.role.name }
    },
    {
      title: '登陆账号',
      key: 'loginInput',
      dataIndex: 'loginInput',
      ellipsis: true
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      align: 'center',
      render: (text, row) => {
        return text === 1 ? <Badge status='success' text='启用' /> : <Badge status='error' text='未启用' />
      }
    },
    {
      title: '是否为内置',
      key: 'buildIn',
      dataIndex: 'buildIn',
      align: 'center',
      render: (text, row) => {
        return text ? '是' : '否'
      }
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      align: 'center',
      sorter: (a, b) => (new Date(a.createTime).getTime() - new Date(b.createTime).getTime())
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      width: 320,
      render: (text, row) => (
        <Space size="middle">
          <Link to={{ pathname: "/setting/admin/detail", query: { id: row.id } }}>详情</Link>
          {!row.buildIn ?
            <>
              <ResetPasswordButton id={row.id} />
              <Link to={{ pathname: "/setting/admin/modify", query: { id: row.id } }}>修改</Link>
              <StatusButton id={row.id} status={row.status} dataSource={dataSource} setDataSource={setDataSource} />
              <DelButton id={row.id} name={row.name} dataSource={dataSource} setDataSource={setDataSource} />
            </>
            : null}
        </Space>
      )
    }
  ]
}

export default columns